<template>
	<view class="login-container">
		<image class="logo-image" :src="logoUrl" mode="aspectFit"></image>
		<text class="username-text">瑞隆安</text>

		<view class="benefits-text">成为会员，立享更多优惠福利</view>

		<view class="phone-hint">授权绑定手机号为您提供更好服务</view>

		<!-- <button class="login-button" @click="handleLogin">一键登录</button> -->
		<button class="login-button" open-type="getPhoneNumber"  @getphonenumber="decryptPhoneNumber">
			一键登录
		</button>

		<view class="agreement-container">
			<radio :checked="isAgreed" @click="toggleAgreement" :value="'1'" />
			<text class="agreement-text">
				已阅读并同意
				<text class="link" @click="goToUserServiceAgreement">《用户服务协议》</text>
				<text class="link" @click="goToPrivacyAgreement">《隐私协议》</text>
			</text>
		</view>

		<view class="skip-login" @click="skipLogin">暂不登录</view>
		
		<!-- 测试体验按钮 -->
		<view class="test-experience-btn" @click="testExperience" v-if="testLogin==='true'">
			<text class="test-text">测试体验</text>
		</view>
		
		<!-- 会员专属提示弹框 -->
		<view v-if="showMemberModal" class="member-modal-overlay" @click="closeMemberModal">
			<view class="member-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-icon">🔒</text>
					<text class="modal-title">会员专属提示</text>
				</view>
				<view class="modal-content">
					<text class="modal-message">您尚未完成「瑞隆安健康」会员认证</text>
					<text class="modal-subtitle">根据健康服务规定，本平台仅对认证会员开放专属服务！</text>
				</view>
				<view class="modal-footer">
					<button class="modal-btn" @click="closeMemberModal">关闭退出</button>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	import Routine from '@/libs/routine';
	import { setToken,getToken } from '@/utils/auth'
	import login_success from '@/utils/loginInit'
	import {mapGetters} from "vuex"
	import { getConfigKey } from "@/api/system/config"
	import {
		getPhoneByXcxcode,
		getxcxAuthorizeVo,
		xcxPhoneLogin,
		xcxQuickLogin,
		simulationLogin
	} from '@/api/login.js';
	export default {
		computed: mapGetters(['isLogin']),
		data() {
			return {
				isAgreed: false,
				logoUrl: '/static/images/logo.png',
				showMemberModal: false,
				testLogin:''
			}
		},
		onLoad() {
			if(!this.isLogin){
				this.getLoginMode()
			}else{
				this.$tab.reLaunch('/pages/index')
			}
		},
		onShow() {
			this.getConfigKey()
		},
		methods: {
			getLoginMode(){
				Routine.getCode().then(code => {
					getPhoneByXcxcode(code).then(res=>{
						if(res.data.phone){
							this.curShowPhone = res.data.showPhone
							this.curPhone = res.data.phone
						}
					})
				});
			},
			async decryptPhoneNumber(e){
				if (!this.isAgreed) {
					uni.showToast({
						title: '请先同意用户协议',
						icon: 'none'
					})
					return
				}
				const xcxCode = await Routine.getCode()
				getxcxAuthorizeVo(xcxCode).then(res => {
					if (res.data) {
						this.sessionKey = res.data.sessionKey
						this.openid = res.data.openId
						this.authKey = xcxCode
						if (e.detail.errMsg === 'getPhoneNumber:ok') {
							xcxQuickLogin(xcxCode, e.detail.iv, e.detail.encryptedData, this.sessionKey, this.openid).then(res2 => {
								if(res2.code===200){
									this.setLoginToken(res2.data)
								}else{
									this.showMemberModal = true
								}
							})
						} else {
							this.$modal.msgError("已拒绝授权手机号登录")
						}
					}
				})
			},
			
			simulationLogin(){
				simulationLogin("15210637621","ocvqQ5aWNeTPn1a-Skza9tF750IE").then(res=>{
					if(res.code===200){
						this.setLoginToken(res.data)
					}else{
						this.showMemberModal = true
					}
				})
			},
			
			handleLogin() {
				if (!this.isAgreed) {
					uni.showToast({
						title: '请先同意用户协议',
						icon: 'none'
					})
					return
				}
				this.$tab.redirectTo(`/pages/identityVerify`)
				// TODO: Implement login logic
			},
			toggleAgreement() {
				this.isAgreed = !this.isAgreed
			},
			skipLogin() {
				this.$tab.reLaunch('/pages/index')
			},
			async initLoginMode() {
				const _this = this
				Routine.getCode().then(code => {
					console.log(code)
				});
			},
			
			setLoginToken(data) {
				this.$store.commit('SET_TOKEN', data.token)
				setToken(data.token)
				uni.navigateBack( { delta: 1})
				this.$emit("loginCall")
				this.loginSuccess()
			},
			// 登录成功后，处理函数
			loginSuccess() {
				//设备用户和权限信息
				login_success.initPower()
				this.$tab.reLaunch('/pages/index')
			},
			
			// 关闭会员弹框
			closeMemberModal() {
				this.showMemberModal = false
			},
			
			// 跳转到用户服务协议页面
			goToUserServiceAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/user-service-agreement'
				})
			},
			
			// 跳转到隐私协议页面
			goToPrivacyAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/privacy-agreement'
				})
			},
			
			// 测试体验按钮点击事件
			testExperience() {
				// 调用模拟登录
				this.simulationLogin()
			},
			
			getConfigKey(){
				getConfigKey("is_test_login").then(response => {
					this.testLogin=response.msg
				})
			}

		}
	}
</script>


<style lang="scss">
	page {
		background-color: #ffffff;
		min-height: 100vh;
	}
</style>

<style lang="scss" scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 150rpx 40rpx;
	}

	.logo-image {
		width: 196rpx;
		height: 196rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}

	.username-text {
		font-size: 32rpx;
		// font-weight: 500;
		color: #000000;
		margin-bottom: 142rpx;
	}

	.benefits-text {
		font-size: 36rpx;
		color: #000000;
		margin-bottom: 86rpx;
	}

	.phone-hint {
		font-size: 22rpx;
		color: #979797;
		margin-bottom: 16rpx;
		letter-spacing: 4rpx;
	}

	.login-button {
		width: 84%;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #4CD080;
		color: #fff;
		border-radius: 32rpx;
		font-size: 32rpx;
		margin-bottom: 42rpx;
	}

	.agreement-container {
		display: flex;
		align-items: center;
		margin-bottom: 120rpx;
	}

	::v-deep .uni-radio-input {
		width: 28rpx !important;
		height: 28rpx !important;
		border: 2rpx solid #979797 !important;
		background-color: transparent !important;
	}

	::v-deep .uni-radio-input.uni-radio-input-checked {
		background-color: #4CD080 !important;
		border-color: #4CD080 !important;
	}

	::v-deep .uni-radio-input.uni-radio-input-checked::before {
		content: "\2714" !important;
		font-size: 18rpx !important;
		color: #fff !important;
		transform: translate(-50%, -50%) scale(1) !important;
		-webkit-transform: translate(-50%, -50%) scale(1) !important;
	}

	.agreement-text {
		font-size: 22rpx;
		color: #999;
		margin-left: 10rpx;

		.link {
			color: #4CD080;
		}
	}

	.skip-login {
		font-size: 22rpx;
		color: #999;
	}

	/* 测试体验按钮样式 */
	.test-experience-btn {
		position: fixed;
		bottom: 120rpx;
		right: 40rpx;
		width: 120rpx;
		height: 120rpx;
		background-color: #4CD080;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 20rpx rgba(76, 208, 128, 0.3);
		z-index: 1000;
	}

	.test-experience-btn:active {
		opacity: 0.8;
		transform: scale(0.95);
	}

	.test-text {
		color: #ffffff;
		font-size: 24rpx;
		font-weight: 500;
		text-align: center;
		line-height: 1.2;
	}

	/* 会员专属提示弹框样式 */
	.member-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		background: rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
		/* 确保在移动端正确显示 */
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		will-change: opacity;
	}

	.member-modal {
		width: 600rpx;
		background: #ffffff;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.15);
	}

	.modal-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 30rpx 20rpx;
		background: #ffffff;
	}

	.modal-icon {
		font-size: 48rpx;
		margin-bottom: 16rpx;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
	}

	.modal-content {
		padding: 20rpx 40rpx 40rpx;
		text-align: center;
	}

	.modal-message {
		display: block;
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 16rpx;
		line-height: 1.5;
	}

	.modal-subtitle {
		display: block;
		font-size: 24rpx;
		color: #999999;
		line-height: 1.4;
	}

	.modal-footer {
		padding: 0 40rpx 40rpx;
	}

	.modal-btn {
		width: 100%;
		height: 88rpx;
		background: #4CD080;
		border-radius: 44rpx;
		color: #ffffff;
		font-size: 30rpx;
		font-weight: 500;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.modal-btn:active {
		opacity: 0.8;
	}
</style>